<template>
    <el-form
      ref="ruleFormRef"
      style="max-width: 300px;"
      :model="ruleForm"
      :rules="rules"
      label-width="auto"
      class="demo-ruleForm"
      :size="formSize"
      status-icon
    >

      <el-form-item label="角色名称" prop="roleName">
        <el-input v-model="ruleForm.roleName" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          新增
        </el-button>
        <el-button @click="resetForm(ruleFormRef)">重置</el-button>
      </el-form-item>
    </el-form>
  </template>
  
  <script lang="ts" setup>
  import { reactive, ref } from 'vue'
  import { ElMessage, type ComponentSize, type FormInstance, type FormRules } from 'element-plus'
  import axios from  'axios'
  import {useRoute,useRouter} from 'vue-router'
  import {useCounterStore} from "@/stores/counter" 

  let router=useRouter();
  let Store=useCounterStore();



  interface RuleForm {
    roleName: string

  }
  
  const formSize = ref<ComponentSize>('default')
  const ruleFormRef = ref<FormInstance>()
  const ruleForm = reactive<RuleForm>({
    roleName: '',

  })
  
  const locationOptions = ['Home', 'Company', 'School']
  
  const rules = reactive<FormRules<RuleForm>>({
    roleName: [
      { required: true, message: '请输入角色名称', trigger: 'blur' },
    ],

  })
  
  const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
      if (valid) {
       axios({
        url:'http://localhost:5272/api/Role/AddRole',
        method:'post',
        data:{
            roleName:ruleForm.roleName,
            createPeople:Store.CurrLoginUser.UserName,
        }
       })
       .then(res=>{
        if(res.data.code==101){
            ElMessage.success(res.data.message);
            router.push("/RoleShow")
        }
       })
      } else {
        console.log('error submit!', fields)
      }
    })
  }
  
  const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
  }
  
  const options = Array.from({ length: 10000 }).map((_, idx) => ({
    value: `${idx + 1}`,
    label: `${idx + 1}`,
  }))
  </script>
  